/** @jsxImportSource @emotion/react */
// import { jsx } from "@emotion/react";
import type { Meta, StoryObj } from '@storybook/react';
import { fn } from '@storybook/test';

import * as React from "react";
import { Alert  } from "../Alert";
import theme from "../Theme";
import {TypeOptions} from "react-toastify/dist/types";

const appearances: Array<TypeOptions> = [
  "info",
  "success",
  "error",
  "default",
  "warning"
];

const meta: Meta<typeof Alert> = {
    title: 'Example/Alert',
    component: Alert,
    parameters: {
        // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
        layout: 'centered',
    },
    // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
    tags: ['autodocs'],
    // More on argTypes: https://storybook.js.org/docs/api/argtypes
    argTypes: {
        // backgroundColor: { control: 'color' },
    },
    // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
    args: { onClick: fn() },
};
export default meta;
type Story = StoryObj<typeof Alert>;

// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
export const Primary: Story = {
    args: {
        intent: "error",
        elevation: "xs",
    },
    decorators: [
        (Story) => (
            <>
                <div>
                    {appearances.map(key => (
                        <Alert
                            css={{
                                margin: theme.spaces.lg
                            }}
                            key={key}
                            intent={key}
                            title={"This is a " + key + " alert"}
                            subtitle={
                                "Culpa laborum nostrud dolore id duis adipisicing aliqua pariatur veniam. Ad Lorem dolor voluptate reprehenderit ullamco in incididunt eiusmod consectetur cupidatat occaecat incididunt."
                            }
                        />
                    ))}
                    <Alert
                        css={{
                            margin: theme.spaces.lg
                        }}
                        title={"This is an alert with a close button"}
                        subtitle={
                            "Culpa laborum nostrud dolore id duis adipisicing aliqua pariatur veniam. Ad Lorem dolor voluptate reprehenderit ullamco in incididunt eiusmod consectetur cupidatat occaecat incididunt."
                        }
                        onRequestClose={() => {
                            console.log("close");
                        }}
                    />
                </div>
                <Story key={2}/>
            </>
        ),
    ],
};

export const Close按钮: Story = {
    args: {
        intent: "info",
        elevation: "xl",
    },
    decorators: [
        (Story) => (
            <>
                <Story key={2}/>
                <Alert
                    css={{
                        margin: theme.spaces.lg
                    }}
                    title={
                        "This is an alert with a close button. Ullamco magna cillum quis ipsum tempor tempor do commodo nisi eu cupidatat ex duis ea."
                    }
                    onRequestClose={() => {
                        console.log("close");
                    }}
                />
            </>
        ),
    ],
};
